<template>
    <div class="mirror-dialog">
        <Cdialog :visible="showVideoDialog" @closeDialog="closeDialog" title="监控设备" width="580" @openDialog="openVideo()">
            <div class="monitorBox-container" :style="cHeight">
                <div class="box-header">
                    <div class="mirror-detail">
                        <div class="mirror-name fs14">
                            摄像头名称：<span class="name-item" style="color: #FFFFFF;">{{ (<any>monitorData).name }}</span>
                        </div>
                        <div class="mirror-location">
                            设备位置：<span class="name-item" style="color: #FFFFFF;">{{ handleSocketStore.$state.location
                            }}</span>
                        </div>
                    </div>
                    <div class="mirror-status">
                        <div class="item-stauts" :style="itemStatusStyle((<any>monitorData).status)">
                            {{ (<any>monitorData).status == 1 ? '在线' : '离线' }}
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <VideoPlayer v-if="(<any>monitorData).url1" :showDetail="true" :type="(<any>monitorData).status"
                        :label="(<any>monitorData).name" ref="videoPlayerRef" :src="VideoSrc" :status="isCloseVide" />
                </div>
            </div>
        </Cdialog>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useHandleSocketStore } from '../../stores/handleSocket'
import { getRtsp } from '@/api/screen/equipment';


const isCloseVide = ref(true)

const urlSrc = ref('')
// 弹框高度自适应,初始高度300，可按需更改
const cHeight = computed(() => {
    return 'height:' + 360 * (innerHeight / 1080) + 'px'
})



const itemStatusStyle: any = ((itemStatus: any) => {
    switch (itemStatus) {
        case '1':
            return 'color:rgba(47, 219, 85, 1);box-shadow: inset 0px 0px 8px 0px rgba(47,219,85,1);border-radius: 4px 4px 4px 4px;background: rgba(43,194,76,0.16);'
        case '0':

            return 'color:rgba(236, 60, 50, 1);box-shadow: inset 0px 0px 3px 0px rgba(236,60,50,1);border-radius: 4px 4px 4px 4px;background: rgba(219,54,44,0.16);'
    }
})




// 从store拿到数据渲染设备弹框
const handleSocketStore = useHandleSocketStore()
const showVideoDialog = computed(() => {
    return handleSocketStore.$state.showDialog
})

const monitorData = computed(() => {
    return handleSocketStore.$state.equipmentData
})
const VideoSrc = computed(() => {
    return handleSocketStore.$state.src
})
const closeDialog = () => {

    handleSocketStore.SetequipmentData([])
    handleSocketStore.SetShowDialog(false)
}
const openVideo = () => {

    isCloseVide.value = true
}






// 窗口显示时，调用接口
// watch(
//     showVideoDialog,
//     newVal => {
//         if (newVal == true) {
//             getEUrl()

//         }
//     }, {
//     immediate: true
// }
// )

</script>

<style scoped lang="scss">
.monitorBox-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    .box-header {
        width: 100%;
        flex: 0.2;
        display: flex;
        justify-content: space-between;

        .mirror-detail {
            display: flex;
            flex-direction: column;

            &>div {
                flex: 0.4;
            }

            .mirror-name {
                display: flex;
                color: rgba(111, 186, 255, 1);
                align-items: center;
            }

            .mirror-location {
                display: flex;
                color: rgba(111, 186, 255, 1);
                align-items: center;
            }
        }

        .mirror-status {
            .item-stauts {
                padding: 2px 6px;
                box-sizing: border-box;
            }
        }
    }

    .box-body {
        flex: 0.8;
        width: 100%;
    }
}
</style>